<div class="row" id="overview_broker">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Broker</h3>
            </div>
            <div class="panel-body">
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>System Name</th>
                            <th>Version</th>
                            <th>Uptime</th>
                            <th>System Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ sysdescr }}</td>
                            <td>{{ version }}</td>
                            <td>{{ uptime }}</td>
                            <td>{{ datetime }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row" id="overview_nodes">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Nodes (<em id="nodes_count">{{ nodes.length }}</em>)
                </h3>
            </div>
            <div class="panel-body">
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Erlang/OTP Release</th>
                            <th>Erlang Processes<br />(used/avaliable)</th>
                            <th>CPU Info<br />(1load/5load/15load)</th>
                            <th>Memory Info<br />(used/total)</th>
                            <th>MaxFds</th>
                            <th>ClusterStatus</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="node in nodes">
                            <td>{{ node['name'] }}</td>
                            <td>{{ node['otp_release'] }}</td>
                            <td>{{ node['process_used'] }} / {{ node['process_available'] }}</td>
                            <td>{{ node['load1'] }} / {{ node['load5'] }} / {{ node['load15'] }}</td>
                            <td>{{ node['used_memory'] }} / {{ node['total_memory'] }}</td>
                            <td>{{ node['max_fds'] }}</td>
                            <td>
                            <span v-show="node['cluster_status'] == 'Running'" class="badge badge-success">{{ node['cluster_status']}}</span>
                            <span v-show="node['cluster_status'] == 'Stopped'" class="badge badge-danger"> {{ node['cluster_status']}}</span>
                            <span v-show="node['cluster_status'] == 'Netsplit'" class="badge badge-danger"> {{ node['cluster_status']}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row" id="overview_stats">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Stats</h3>
            </div>
            <div class="panel-body">
                <div class="table-responsive" data-pattern="priority-columns"
                    data-focus-btn-icon="fa-asterisk" data-sticky-table-header="true"
                    data-add-display-all-btn="true" data-add-focus-btn="true">
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th>Clients/Count</th>
                                <th>Clients/Max</th>
                                <th>Retained/Count</th>
                                <th>Retained/Max</th>
                                <th>Routes/Count</th>
                                <th>Routes/Max</th>
                                <th>Sessions/Count</th>
                                <th>Sessions/Max</th>
                                <th>Subscribers/Count</th>
                                <th>Subscribers/Max</th>
                                <th>Subscriptions/Count</th>
                                <th>Subscriptions/Max</th>
                                <th>Topics/Count</th>
                                <th>Topics/Max</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td id="clients_count">0</td>
                                <td id="clients_max">0</td>
                                <td id="retained_count">0</td>
                                <td id="retained_max">0</td>
                                <td id="routes_count">0</td>
                                <td id="routes_max">0</td>
                                <td id="sessions_count">0</td>
                                <td id="sessions_max">0</td>
                                <td id="subscribers_count">0</td>
                                <td id="subscribers_max">0</td>
                                <td id="subscriptions_count">0</td>
                                <td id="subscriptions_max">0</td>
                                <td id="topics_count">0</td>
                                <td id="topics_max">0</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" id="overview_metrics">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Metrics</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                
                    <div class="col-md-4">
                        <table class="table table-striped table-condensed">
                        <caption>The packets data</caption>
                        <tbody>
                            <!-- received/sent -->
                            <tr>
                                <td>received</td>
                                <td class="ta-right" id="packets_received">0</td>
                            </tr>
                            <tr>
                                <td>sent</td>
                                <td class="ta-right" id="packets_sent">0</td>
                            </tr>
                            <!-- connect, connack, disconnect -->
                            <tr>
                                <td>connect</td>
                                <td class="ta-right" id="packets_connect">0</td>
                            </tr>
                            <tr>
                                <td>connack</td>
                                <td class="ta-right" id="packets_connack">0</td>
                            </tr>
                            <tr>
                                <td>disconnect</td>
                                <td class="ta-right" id="packets_disconnect">0</td>
                            </tr>
                            <!-- pingreq, pingresp -->
                            <tr>
                                <td>pingreq</td>
                                <td class="ta-right" id="packets_pingreq">0</td>
                            </tr>
                            <tr>
                                <td>pingresp</td>
                                <td class="ta-right" id="packets_pingresp">0</td>
                            </tr>
                            <!-- publish/sent|received -->
                            <tr>
                                <td>publish/received</td>
                                <td class="ta-right" id="packets_publish_received">0</td>
                            </tr>
                            <tr>
                                <td>publish/sent</td>
                                <td class="ta-right" id="packets_publish_sent">0</td>
                            </tr>

                            <!-- puback/sent|received -->
                            <tr>
                                <td>puback/received</td>
                                <td class="ta-right" id="packets_puback_received">0</td>
                            </tr>
                            <tr>
                                <td>puback/sent</td>
                                <td class="ta-right" id="packets_puback_sent">0</td>
                            </tr>
                            <tr>
                                <td>puback/missed</td>
                                <td class="ta-right" id="packets_puback_missed">0</td>
                            </tr>
                            <!-- pubcomp/sent|received -->
                            <tr>
                                <td>pubcomp/received</td>
                                <td class="ta-right" id="packets_pubcomp_received">0</td>
                            </tr>
                            <tr>
                                <td>pubcomp/sent</td>
                                <td class="ta-right" id="packets_pubcomp_sent">0</td>
                            </tr>
                            <tr>
                                <td>pubcomp/missed</td>
                                <td class="ta-right" id="packets_pubcomp_missed">0</td>
                            </tr>
                            <!-- pubrec/sent|received -->
                            <tr>
                                <td>pubrec/received</td>
                                <td class="ta-right" id="packets_pubrec_received">0</td>
                            </tr>
                            <tr>
                                <td>pubrec/sent</td>
                                <td class="ta-right" id="packets_pubrec_sent">0</td>
                            </tr>
                            <tr>
                                <td>pubrec/missed</td>
                                <td class="ta-right" id="packets_pubrec_missed">0</td>
                            </tr>
                            <!-- pubrel/sent|received -->
                            <tr>
                                <td>pubrel/received</td>
                                <td class="ta-right" id="packets_pubrel_received">0</td>
                            </tr>
                            <tr>
                                <td>pubrel/sent</td>
                                <td class="ta-right" id="packets_pubrel_sent">0</td>
                            </tr>
                            <tr>
                                <td>pubrel/missed</td>
                                <td class="ta-right" id="packets_pubrel_missed">0</td>
                            </tr>
                            <!-- subscribe, suback -->
                            <tr>
                                <td>subscribe</td>
                                <td class="ta-right" id="packets_subscribe">0</td>
                            </tr>
                            <tr>
                                <td>suback</td>
                                <td class="ta-right" id="packets_suback">0</td>
                            </tr>
                            <!-- unsubscribe, unsuback -->
                            <tr>
                                <td>unsubscribe</td>
                                <td class="ta-right" id="packets_unsubscribe">0</td>
                            </tr>
                            <tr>
                                <td>unsuback</td>
                                <td class="ta-right" id="packets_unsuback">0</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>

                    <div class="col-md-4">
                        <table class="table table-striped table-condensed">
                        <caption>The messages data</caption>
                        <tbody>
                            <!-- received -->
                            <tr>
                                <td>received</td>
                                <td class="ta-right" id="messages_received">0</td>
                            </tr>
                            <!-- sent -->
                            <tr>
                                <td>sent</td>
                                <td class="ta-right" id="messages_sent">0</td>
                            </tr>
                            <!-- dropped -->
                            <tr>
                                <td>dropped</td>
                                <td class="ta-right" id="messages_dropped">0</td>
                            </tr>
                            <!-- retained -->
                            <tr>
                                <td>retained</td>
                                <td class="ta-right" id="messages_retained">0</td>
                            </tr>
                            <!-- qos0 received/sent -->
                            <tr>
                                <td>qos0/received</td>
                                <td class="ta-right" id="messages_qos0_received">0</td>
                            </tr>
                            <tr>
                                <td>qos0/sent</td>
                                <td class="ta-right" id="messages_qos0_sent">0</td>
                            </tr>
                            <!-- qos1 received/sent -->
                            <tr>
                                <td>qos1/received</td>
                                <td class="ta-right" id="messages_qos1_received">0</td>
                            </tr>
                            <tr>
                                <td>qos1/sent</td>
                                <td class="ta-right" id="messages_qos1_sent">0</td>
                            </tr>
                            <!-- qos2 received/sent -->
                            <tr>
                                <td>qos2/received</td>
                                <td class="ta-right" id="messages_qos2_received">0</td>
                            </tr>
                            <tr>
                                <td>qos2/sent</td>
                                <td class="ta-right" id="messages_qos2_sent">0</td>
                            </tr>
                            <tr>
                                <td>qos2/dropped</td>
                                <td class="ta-right" id="messages_qos2_dropped">0</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>

                    <div class="col-md-4">
                        <table class="table table-striped table-condensed">
                        <caption>The bytes data</caption>
                        <tbody>
                            <tr>
                                <td>received</td>
                                <td class="ta-right" id="bytes_received">0</td>
                            </tr>
                            <tr>
                                <td>sent</td>
                                <td class="ta-right" id="bytes_sent">0</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" id="voerview_listeners">
    <div class="col-sm-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Listeners (<em id="listeners_count">{{ listeners.length }}</em>)
                </h3>
            </div>
            <div class="panel-body">

                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>Protocol</th>
                            <th>Listen On</th>
                            <th>Max Clients</th>
                            <th>Current Clients</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="listener in listeners">
                            <td>{{ listener['protocol'] }}</td>
                            <td>{{ listener['listen'] }}</td>
                            <td>{{ listener['max_clients'] }}</td>
                            <td>{{ listener['current_clients'] }}</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>
